@import '../../config/base.scss';

.cart-item-wrapper{
    //margin-bottom: 10px;
    border-bottom:1px solid #e0e0e0;

    .cart-activity{
        overflow: hidden;
        padding: 0 0.1rem;
        line-height: 30px;
        border-bottom:1px solid #F6F6F6;

        &-left{
            @extend %ellipsis;
            width:80%;
            font-size: 12px;
            color: #333;

            span{
                display: inline-block;
                background-color: $base-orange;
                border:1px solid $base-orange;
                color:#FFF;
                padding: 0 4px;
                line-height: 18px;
                border-radius: 4px;
                margin-right: 5px;
            }
        }

        &-right{
            color:#FF7258;
            line-height: 28px;

            i{
                vertical-align: -1px;
            }
        }
    }
}

.cart-item{
  position:relative;
  padding:0.1rem 0.1rem 0.1rem 0.5rem;
  //border-bottom:1px solid #f0f0f0;
  overflow:hidden;

  img{
    width:0.7rem;
    margin-right:0.1rem;
    float:left;
  }

  .info{
    overflow:hidden;
    padding-right:$gap;
  }

  .title{
    @extend %ellipsis;
    margin-bottom:0.05rem;
    width: 95%;
    height:0.2rem;
    line-height:20px;
    overflow: hidden;
    font-size:14px;
    color:$base-dark;
  }

    .specification{
        margin-bottom:0.05rem;
        height: 0.2rem;
        color: $base-grey;

        span{
            @extend %ellipsis;
            max-width: 100%;
            display: inline-block;
            height: 0.22rem;
            line-height: 0.18rem;
            padding: 0 4px;
            box-sizing: border-box;
            border: 1px solid #BEBEBE;
            border-radius: 4px;
        }
    }

  .price{
    margin-bottom:0.08rem;
    font-size:14px;
    color:#f87649;
    float: left;
  }

  .weight{
    padding:0.02rem 0.05rem;
    border:1px solid $base-grey;
    color:$base-grey;
    font-size:11px;
    border-radius:5px;
  }

  .count{
    float:right;
    margin-top:-2px;
    margin-right:-$gap;
  }

    .count-wrapper{
        text-align: right;
        font-size: 15px;
    }

  .plus,
  .minus{
    display:inline-block;
    color: $base-dark;
    font-size:24px;
    vertical-align: -4px;

    &.disabled{
      color:$base-grey;
    }
  }

  .number{
    display:inline-block;
    width:0.38rem;
    height:0.18rem;
    text-align:center;
    font-size:15px;

      input{
          display: inline-block;
          border:none;
          outline: none;
          width: 100%;
          text-align:center;
          font-size:15px;
          vertical-align: 1px;
      }
  }

  .remains{
    font-size:13px;
    text-align:center;
    color:#f87649;
  }

  .del{
    @include absolute(top 0.1rem right 0.13rem);
    display:block;
    color:$base-grey;
    font-size:17px;
  }

  .radio{
    @include absolute(left 0.15rem top 0.36rem);
    color:$base-dark;
    font-size:20px;

    &.active{
      color:$base-green;
    }
  }

    .icon-bukexuan{
        color:#D7D7D7;
    }

  .gift-sign{
      @include absolute(left 0.1rem top 0.36rem);
      display: inline-block;
      box-sizing: border-box;
      border:1px solid $base-green;
      color:$base-green;
      padding: 0 4px;
      line-height: 18px;
      border-radius: 4px;
      margin-right: 5px;
  }

  .circle{
    display:block;
    width:0.18rem;
    height:0.18rem;
    margin:0.01rem auto;
    background:#fff;
    border-radius:100%;
  }

    &-activity{
        width:100%;
        padding-left:0.15rem;
        padding-right: 0.15rem;
        height: 20px;
        line-height: 20px;
        background-color: #fff9f8;
        color:#999;
        position: relative;
        //border-bottom:1px solid #f0f0f0;

        &-left{
            @extend %ellipsis;
            width:80%;
            font-size: 13.75px;
            -webkit-transform:scale(0.8);
        }

        &-right{
            padding-left:20px;
            font-size: 13.75px;
            -webkit-transform:scale(0.8);
        }

        .triangle{
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 10px solid #fff9f8;
            position: absolute;
            top:-10px;
            left:18px;
        }
    }

    &-gift{
        //border-bottom:1px solid #f0f0f0;

        .title{
            @extend %ellipsis;
            margin-right:0.1rem;
            margin-bottom:0;
            height:0.35rem;
            line-height:0.35rem;
            overflow: hidden;
            font-size:14px;
            color:$base-dark;
        }

        .price{
            margin-bottom:0.08rem;
            font-size:14px;
            color:#f87649;
            float: left;
        }
    }
}
